﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>显示瓦片的网格信息</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        #map{
            width:100%;
            height:100%;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="map" > 
    </div>
    <script type="text/javascript">
        //实例化图层数据源对象
        var osmSource = new ol.source.OSM();

        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
                //加载瓦片图层数据（OSM）
                new ol.layer.Tile({
                    source: osmSource
                }),
                //加载瓦片网格图层
                new ol.layer.Tile({
                    source: new ol.source.TileDebug({
                        projection: 'EPSG:3857', //地图投影坐标系
                        tileGrid: osmSource.getTileGrid()  //获取瓦片图层数据对象（osmSource）的网格信息
                    })
                })
            ],
            //地图视图设置
            view: new ol.View({
                center: [12900000, 4900000], //地图初始中心点
                zoom: 8  //地图初始显示级别
            })
        });
    </script>
</body>
</html>
